<template>
  <div style="width: 100%;height: 100vh">
    <div id="container"></div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

function onComplete(data) {
  // data是具体的定位信息
  console.log(data);
}

function onError(data) {
  // 定位出错
  console.error(data);
}

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "9a93480ae34061f6e7fff76254d74310",
  };
  AMapLoader.load({
    key: "ee862e76c8b01a8c6c0776f693c59c32", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
      .then((AMap) => {
        map = new AMap.Map("container", {
          rotateEnable:true,
          pitchEnable:true,
          pitch: 50,
          rotation: -15,
          viewMode:'3D', //开启3D视图,默认为关闭
          zooms:[12,20],
          center: [106.555, 29.63], // 初始化地图中心点位置
        });
        console.log(map)

      })
      .catch((e) => {
        console.error(e);
      });

  AMapLoader.load({ //可多次调用load
    plugins:['AMap.MapType']
  }).then((AMap)=>{
    //异步加载控件
    AMap.plugin('AMap.ToolBar', function () {
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
    });
    AMap.plugin('AMap.Scale', function () {
      var Scale = new AMap.Scale();
      map.addControl(Scale);
    });
    AMap.plugin('AMap.Geolocation', function () {
      var Geolocation = new AMap.Geolocation({
        'showButton': true,//是否显示定位按钮
        'position': 'LB',//定位按钮的位置
        'offset': [10, 50],//定位按钮距离对应角落的距离
        'showMarker': true,//是否显示定位点
        'showCircle': true,//是否显示定位精度圈
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        zoomToAccuracy: true,//定位成功后是否自动调整地图视野到定位点
      });
      map.addControl(Geolocation);
      Geolocation.getCurrentPosition(function (status, result) {
        if (status === 'complete') {
          onComplete(result)
        } else {
          onError(result)
        }
      })
    });
    map.addControl(new AMap.MapType())
  }).catch((e)=>{
    console.error(e);
  });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped lang="less">
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>